<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>修改内容</title>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="./js/jtnch.ttf" />
    <link rel="stylesheet" href="./css/update.css" />
  </head>
  <body>
    <div class="lbjj">
        <div class="lbj1"></div>
      </div>
      <div class="lbjj">
        <div class="lbj2"></div>
      </div>
      <div class="lbjj">
        <div class="lbj3"></div>
      </div>
      <div class="lbjj">
        <div class="lbj4"></div>
      </div>
    </div>
    <div class="xing"></div>
    <div class="cr1">
      商品图片：<input type="text" /><br />
      商品名称：<input type="text" /><br />
      商品价格：<input type="text" /><br />
      商品详情：<input type="text" /><br />
      点击按钮：<input type="button" value="修改" onclick="updateProduct()" />
    </div>

    <script>
      // 把搜索字符串 ？ id=22&a=2&b=2 转为对象
      let searchObj = new URLSearchParams(location.search);
      console.log(searchObj);
      // 获取 id 的值
      let pid = searchObj.get("id");
      console.log(pid);
      let detailProductAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
      axios.get(detailProductAPI, { params: { id: pid } }).then((r) => {
        // r.data 服务器的返回数据
        let pObj = r.data.data;
        console.log(pObj);
        let ipts = document.querySelectorAll("input");
        ipts[0].value = pObj.pname;
        ipts[1].value = pObj.pprice;
        ipts[2].value = pObj.pimg;
        ipts[3].value = pObj.pdesc;
      });
      //

      async function updateProduct() {
        let ipts = document.querySelectorAll("input");
        let pname = ipts[0].value;
        let pprice = ipts[1].value;
        let pimg = ipts[2].value;
        let pdesc = ipts[3].value;
        //pid 全局变量
        let params = { pname, pprice, pimg, pdesc, pid };
        console.log(params);
        // 调用修改接口
        let updateProduct =
          "http://jx.xuzhixiang.top/ap/api/goods/goods-update.php";
        let r = await axios.get(updateProduct, { params });
        console.log(r.data);
        // 修改成功跳转页面
        location.href = "home.html";
      }
    </script>
  </body>
</html>
